<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="../assets/images/logo.png">
  <title>文章详情</title>

  <!-- 部署项目要改的地方 -->
  <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
  <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../assets/css/normalize.css">
  <link rel="stylesheet" href="../assets/css/detail.css">

  <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
  <script src="http://minio.java.itsource.cn/resources/vue/dist/vue.min.js"></script>
  <script src="http://minio.java.itsource.cn/resources/element-ui/lib/index.js"></script>
  <script src="http://minio.java.itsource.cn/resources/jQuery/tmp/jquery.js"></script>
  <script src="http://minio.java.itsource.cn/resources/bootstrap/dist/js/bootstrap.bundle.js"></script>
  <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
  <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
  <script src="http://minio.java.itsource.cn/resources/http-vue-loader/src/httpVueLoader.js"></script>
  <script src="http://minio.java.itsource.cn/resources/axios/dist/axios.min.js"></script>
  <script src="../assets/js/common.js"></script>

  <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
  <!--   <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../assets/css/normalize.css">
  <link rel="stylesheet" href="../assets/css/detail.css"> -->

  <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
  <!--   <script src="../node_modules/vue/dist/vue.min.js"></script>
  <script src="../node_modules/element-ui/lib/index.js"></script>
  <script src="../node_modules/jQuery/tmp/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script> -->
  <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
  <!--   <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="../assets/js/common.js"></script> -->

</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 80px">
      <div class="container">
        <a href="#">
          <img :src="article.articlePic" width="100%" alt="" />
        </a>
      </div>
    </section>

    <section class="mt-3">
      <div class="container">
        <div class="card" style="background-color: white;">
          <div class="card-body">
            <div class="text-center">
              <h2 class="my-4">{{article.articleName}}</h2>
              <p>
                <i class="bi bi-folder2-open opacity-50"></i>
                <span class="card-text articleMsg">{{article.articleTypeName}}</span>
                <i class="bi bi-tags opacity-50 ms-2"></i>
                <span class="card-text articleMsg">{{article.articleTag}}</span>
                <i class="bi bi-alarm opacity-50  ms-2"></i>
                <span class="card-text articleMsg">{{article.createTime}}</span>
                <a href="javascript:;" class="card-link articleMsg ms-2" @click="addLike">
                  <!-- 没有点赞或取消点赞状态 -->
                  <i v-if="good == 0" class="bi bi-hand-thumbs-up-fill opacity-50"></i> {{article.articleStarNum}}
                  <!-- 已经点赞状态 -->
                  <i v-else class="bi bi-hand-thumbs-up-fill opacity-50 text-danger"></i> {{article.articleStarNum}}
                </a>
                <i class="bi bi-book-half opacity-50 ms-2"></i>
                <span class="card-text articleMsg">{{article.articleReadCount}}</span>
              </p>
              <hr class="my-4" />
              <p class="text-start" v-html="article.articleContent">
              </p>
            </div>
            <hr class="my-4" />
            <div>
              <h3>相关文章</h3>
              <ul class="list-group list-group-flush mb-3">
                <li class="list-group-item" style="border: none;" v-for="a in relatedArticles">&bull;
                  <a :href="'blog-detail.html?' + a.id" class="text-info article">{{a.articleName}}</a>
                </li>
              </ul>


              <div style="background-color: #fafbfc;">
                <div class="d-flex">
                  <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2" />
                  <input class="form-control h-75 mt-3" v-model="content" placeholder="请输入评论..." />
                </div>
                <button type="button" class="btn btn-primary" style="width: 100px;margin-left: 55px;"
                  @click="publishComment">发表评论</button>
              </div>

              <hr />
              <div>
                <div v-for="c in comments">
                  <div class="delBtn" @click="deleteComment(c.id)">
                    <i class="bi bi-trash3-fill"></i>
                  </div>
                  <div class="d-flex">
                    <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2" />
                    <div class="mt-1">
                      <span class="text-dark fw-bolder h6">游客:
                        <span> {{c.nickname}}</span>
                      </span>
                      <br />
                      <span>{{c.createTime}}</span>
                    </div>
                  </div>
                  <span style="margin-left: 55px;">{{c.content}}</span>
                  <hr class="my-2" />
                </div>
                <el-pagination background layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="totals"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                  :page-size="pageSize" :page-sizes="pageSizes">
                </el-pagination>
              </div>
              <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                    d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
              <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                  但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                </p>
                <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    new Vue({
      el: "#app",
      // 数据
      data() {
        return {
          // 文章数据
          articleId: null, // url的id
          article: {}, // 文章对象

          // 相关文章数据
          relatedArticles: [],

          // 所有评论数据
          comments: [],

          // 评论内容
          content: '',

          // 点赞情况 (0表示没有点赞, 1表示已经点赞)
          good: null,

          // 分页数据
          totals: 0, // 总记录条数
          currentPage: 1, // 当前页, 要传递到后台的
          pageSize: 5, // 每页显示多少条
          pageSizes: [5, 10, 20, 30, 50, 100, 200], // 每页显示条数选择框

        }
      },
      // 方法
      methods: {
        // 获取文章
        getArticle() {
          // 根据id查询文章
          this.$http.get("/article/" + this.articleId).then(res => {
            this.article = res.data;
          })
        },

        // 获取相关文章
        getRelatedArticles() {
          // 根据id查询文章
          this.$http.get("/article/getRelatedArticles/" + this.articleId).then(res => {
            this.relatedArticles = res.data;
          })
        },

        // 获取改文章下面的所有评论
        /*       getCommentsByArticleId() {
                this.$http.get("/comment/" + this.articleId).then(res => {
                  // 给评论数据赋值
                  this.comments = res.data;
                })
              }, */

        // 随机生成游客名
        createUuid() {
          var s = [];
          var hexDigits = "0123456789abcdefghi";
          for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
          }
          s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
          s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
          s[8] = s[13] = s[18] = s[23] = "-";

          var uuid = s.join("");
          return uuid;
        },

        // 发表评论
        publishComment() {
          // 判断是否输入为空
          if (!this.content.trim() == '') {
            // 定义评论参数
            let params = {
              articleId: this.articleId,
              content: this.content,
              nickname: this.createUuid(),
            }
            this.$http.put("/comment", params).then(res => {
              if (res.data.success) {
                // 重新获取所有评论
                // this.getCommentsByArticleId();
                // 总条数+1
                this.totals = this.totals + 1;
                // 跳转到最后一页
                this.currentPage = Math.ceil(this.totals / this.pageSize);
                this.getCommentsByQueryPage();
                // 清空评论输入
                this.content = '';
              } else {
                this.$message.error("评论失败")
              }
            })
          } else {
            // 清空评论输入
            this.content = '';
            this.$message.error("说点什么再发评论吧")
          }
        },

        // 删除评论
        deleteComment(id) {
          this.$http.delete("/comment/" + id).then(res => {
            if (res.data.success) {
              // 重新获取所有评论
              // this.getCommentsByArticleId();
              this.getCommentsByQueryPage();
            } else {
              this.$message.error("删除失败")
            }
          })
        },

        // 阅读量加1
        addPageView() {
          this.$http.put("/article/addPageView/" + this.articleId).then(res => {
            if (res.data.success) {
              // 重新加载文章
              this.getArticle();
            }
          })
        },

        // 点赞
        addLike() {
          // 通过ip获取是点赞还是取消点赞
          this.$http.get("/likes/getGoodByIp/" + this.articleId).then(res => {
            if (res.data.success) { // 点赞或取消点赞成功
              // 获取点赞图标颜色
              this.getLikeColor();
              // 重新加载文章
              this.getArticle();
            }
          })
        },

        // 获取点赞图标颜色
        getLikeColor() {
          // 通过ip查询点赞情况, 是高亮展示还是灰色展示点赞图标
          this.$http.get("/likes/getLikeColor/" + this.articleId).then(res => {
            if (res.data.data == "likes") { // 点赞状态
              this.good = 1
            } else { // 没有点赞
              this.good = 0
            }
          })
        },

        // 分页查询
        getCommentsByQueryPage() {
          // 定义参数
          let params = {
            "currentPage": this.currentPage,
            "pageSize": this.pageSize,
          }
          this.$http.post("/comment", params).then(res => {
            // 获取总条数
            this.totals = res.data.total;
            // 给评论数据赋值
            this.comments = res.data.commentList;
          })
        },

        // 选择第几页时触发
        handleCurrentChange(currentPage) { // 当前页是多少, currentPage就是多少
          // 重新给当前页赋值
          this.currentPage = currentPage;
          // 重新获取评论列表数据
          this.getCommentsByQueryPage();
        },

        // 选择每页显示记录条数时触发
        handleSizeChange(pageSize) { // 每页显示条数是多少, pageSize就是多少
          // 重新给每页显示条数赋值
          this.pageSize = pageSize;
          // 重新获取评论列表数据
          this.getCommentsByQueryPage();
        },


      },
      // 组件
      components: {
        // 将组建加入组建库
        'my-header': httpVueLoader('./common/header.vue')
      },
      // 钩子函数
      mounted() {
        // 获取当前网页的url地址
        let url = location.href;
        // 截取url的id
        let urlId = url.substring(url.lastIndexOf("?") + 1);
        // 给articleId赋值
        this.articleId = urlId;
        // 根据id查询文章
        this.getArticle();
        // 阅读量加1
        this.addPageView();
        // 获取相关文章
        this.getRelatedArticles();

        // 获取该文章下面所有的评论
        // this.getCommentsByArticleId();

        // 分页查询评论
        this.getCommentsByQueryPage();
        // 获取点赞图标颜色
        this.getLikeColor();
      },

    })
  </script>

</body>

</html>